<template>
  <div>
    <van-sticky>
      <van-row style="background-color: #f2f2f2; height: 54px">
        <van-col span="3" style="padding-left: 15px">
          <van-image
              fit="contain"
              style="margin-top: 0.6rem"
              width="2rem"
              :src="require('../assets/mi.png')"
          />
        </van-col>
        <van-col span="18">
          <van-search
              v-model="value"
              background="#f2f2f2"
              placeholder="请输入搜索关键词"
          />
        </van-col>
        <van-col span="3">
          <van-icon
              style="margin-top: 0.7rem;margin-right: 0.5rem"
              size="2rem"
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"/>
        </van-col>
      </van-row>
    </van-sticky>
    <van-row style="background-color: #f2f2f2; margin-bottom: 60px">
      <van-col span="24">
        <van-tabs v-model:active="activeName" background="#f2f2f2" sticky offset-top="54px">
          <van-tab title="推荐" name="a">

            <!--轮播图开始-->
            <van-row>
              <van-col span="24" offset="0">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item>
                    <van-image
                        fit="fill"
                        :src="require('../assets/a.jpg')"
                    />
                  </van-swipe-item>
                  <van-swipe-item>
                    <van-image
                        fit="contain"
                        :src="require('../assets/b.jpg')"
                    />
                  </van-swipe-item>
                  <van-swipe-item>
                    <van-image
                        fit="contain"
                        :src="require('../assets/c.png')"
                    />
                  </van-swipe-item>
                </van-swipe>
              </van-col>
            </van-row>
            <!--轮播图结束-->

            <!--分类开始-->
            <van-row>
              <van-col>
                <van-grid :border="false" :column-num="5" clickable="true">
                  <van-grid-item>
                    <van-image
                        :src="require('../assets/zn.png')"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                        :src="require('../assets/sx.jpg')"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                        :src="require('../assets/sj.png')"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                        :src="require('../assets/bjb.png')"
                    />
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                        :src="require('../assets/ds.png')"
                    />
                  </van-grid-item>
                </van-grid>
              </van-col>
            </van-row>
            <!--分类结束-->

            <!--第一栏三个推荐位开始-->
            <van-row :gutter="5">
              <van-col :span="12">
                <a href="/product/detail" >
                  <van-image
                      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png"
                  />
                </a>
              </van-col>
              <van-col :span="12">
                <van-row>
                  <van-col>
                    <a href="javascript:void(0)" @click="click('watch')">
                      <van-image src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png"/>
                    </a>
                  </van-col>
                </van-row>
                <van-row>
                  <van-col>
                    <a href="javascript:void(0)" @click="click('小米电视')">
                      <van-image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg"/>
                    </a>
                  </van-col>
                </van-row>
              </van-col>
            </van-row>
            <!--第一栏三个推荐位结束-->
            <!--热销爆款开始-->
            <van-row>
              <van-col>
                <van-image src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF" />
              </van-col>
            </van-row>
            <!--热销爆款结束-->
            <!--单品推荐开始-->
            <van-row :gutter="5" :span="24" style="margin: 10px 0 10px 0">
              <van-col :span="12" style="position: relative">
                <van-image  fit="fill"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d7f31258a1f84a277918cecab14aaa.jpg" />

                <div class="info">
                  <p>K50 电竞版</p>
                  <p class="des">全线拉满的冷血旗舰</p>
                  <p class="sale">￥3299 <span>起</span></p>
                  <van-button type="primary" size="small" color="#ea625b">立即购买</van-button>
                </div>
              </van-col>
              <van-col :span="12">
                <van-image  fit="fill"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d7f31258a1f84a277918cecab14aaa.jpg" />
                <div class="info">
                  <p>K50 电竞版</p>
                  <p class="des">全线拉满的冷血旗舰</p>
                  <p class="sale">￥3299 <span>起</span></p>
                  <van-button type="primary" size="small" color="#ea625b">立即购买</van-button>
                </div>
              </van-col>
              <van-col :span="12">
                <van-image  fit="fill"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d7f31258a1f84a277918cecab14aaa.jpg" />
                <div class="info">
                  <p>K50 电竞版</p>
                  <p class="des">全线拉满的冷血旗舰</p>
                  <p class="sale">￥3299 <span>起</span></p>
                  <van-button type="primary" size="small" color="#ea625b">立即购买</van-button>
                </div>
              </van-col>
              <van-col :span="12">
                <van-image  fit="fill"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d7f31258a1f84a277918cecab14aaa.jpg" />
                <div class="info">
                  <p>K50 电竞版</p>
                  <p class="des">全线拉满的冷血旗舰</p>
                  <p class="sale">￥3299 <span>起</span></p>
                  <van-button type="primary" size="small" color="#ea625b">立即购买</van-button>
                </div>
              </van-col>
            </van-row>

            <!--单品推荐结束-->
            <van-row>
              <van-col>
                <van-image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg"/>
              </van-col>
            </van-row>
          </van-tab>
          <van-tab title="智能" name="b">内容 2</van-tab>
          <van-tab title="电视" name="c">内容 3</van-tab>
          <van-tab title="家电" name="e">内容 4</van-tab>
          <van-tab title="笔记本" name="f">内容 5</van-tab>
        </van-tabs>
      </van-col>

    </van-row>
    <footer-tabbar/>
  </div>


</template>
<script>
import FooterTabbar from  '@/components/footerTabbar'
export default {
  name: "index",
  components:{
   FooterTabbar
  },
  data() {
    return {activeKey: 0,
      activeName:'a',//分类导航选中项
      active:0//底部标签选中项
    };
  },
  methods: {
    onClickLeft() {
      this.$toast('返回')
    }, onClickRight() {
      this.$toast('按钮')
    },
    click(message){
      this.$toast.success(message);
    }
  }
}</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
  margin-bottom: -10px;
}
/deep/ .van-grid-item__content{
  padding: 0px;
}
.info {
  font-size: 14px;
  text-align: center;
}
.info p{
  margin: 0px;
  color: #333;
}
.info .des{
  margin: 0px;
  font-size: 10px;
  color: #777;
}
.info .sale{
  color: #ff3331;
  font-size: 16px;
}
.info .sale span{
  font-size: 10px;
}

</style>